<template>
<!--生成首页header轮播图-->
  <div class="headerWrap">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(n,inx) in dataObj" :key=inx>
        <img :src="n"/>
      </van-swipe-item>
    </van-swipe>
  </div>
  <!--限时秒杀-->
  <div class="t_seckillWrap">
      <div class="seckill">
        <!--倒计时-->
          <div class="header_time">
            <p>00点场倒计时</p>
            <van-count-down :time="time_val" class="count_down_sty">
                 <template #default="timeData">
                   <!--<template v-slot:timeData>-->
                    <!--{{timeData}}-->
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
            </van-count-down>
            
          </div>

        <!--抢购按钮-->
          <div class="snap_upBtn">去抢购 ></div>

        <!--限时秒杀 菜品列表-->
        <div class="seckill_goods">          
        <van-swipe :loop="false" :width="200" :show-indicators="false">
          <!--为了列表宽度能够正好显示，所以,goodsObj 不能加 margin  所以, 又套了一层，.goodsBorder-->
          <van-swipe-item v-for="(n,inx) in seckill_goodsObj" class='goodsObj' :key="inx">
            <div class="goodsBorder"> 
                <img :src=n.goods_img />
                <p style="margin:0">{{n.goods_name}}</p>
                <div>
                  <label for="">￥{{n.price}}</label>
                  <span>￥{{n.orgin_price}}</span>
                </div>
              </div>
          </van-swipe-item>    
        </van-swipe>
        </div>
      </div>
  </div>

  <!--热销top 导航条-->
  <div class="goodsNavHotWarp">
    <van-tabs v-model:active="active" background="#f3f3f3"  class="hot_listWrap" title-inactive-color="#e29a34" title-active-color="#e29a34"	>
      <van-tab v-for="(n,inx) in goodsHotObj" :title="n.nav_title" :key="inx">
         <div v-for="(m,iny) in n.goods_Obj" :key="iny" class="goodsHotDiv">
           <p>{{m.goods_name}}</p>
           <p>{{m.num}}</p>
           <p>{{m.goods_txt}}</p>
           <p>{{m.price}}</p>

         </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import DATA_OBJ from '@/DATA_Obj.config'

export default {
  name: 'indexWrap',
  setup(){
    //生成首页header轮播图
    let dataObj = DATA_OBJ.headerImg;
    console.log(dataObj);
    //限时秒杀 倒计时
    let time_val = 10 * 60 * 60 * 1000;
    //限时秒杀 菜品列表
     let seckill_goodsObj=DATA_OBJ.seckill_goods;
     console.log(seckill_goodsObj);
     //热销TOP ,导航条 
     let goodsNavObj=DATA_OBJ.goodsNavHotData
     console.log(goodsNavObj);
     //热销HOT菜品，title， 列表
          let goodsHotObj=DATA_OBJ.goodsHotData
     console.log(goodsHotObj);

  return {
    dataObj,
    time_val,
    seckill_goodsObj,
    goodsNavObj,
    goodsHotObj,
  }
 },
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3{
  margin: 40px 0 0;
}
ul{
  list-style-type: none;
  padding: 0;
}
li{
  display: inline-block;
  margin:  0 10px;
}
/**首页header轮播图 */
.my-swipe .van-swipe-item{
 width:100%;
 height:300px;

}
.my-swipe .van-swipe-item img{
  width:100%;
  height: 300px;
}
/*限时秒杀*/
.t_seckillWrap{
  width: 100%;
  background: #fff;
  border-radius: 15px;
  position:relative;
  z-index: 4;
  top:-10px;
  padding-top: 20px;
}
.t_seckillWrap .seckill{
  width:90%;
  margin:0 auto;
  border-radius:  15px;
  background-color:#ffd871;
  background-image: url("../assets/seckill_tip_bg.png");
  background-repeat: no-repeat;
  background-position:  0px 8px;
}
/*倒计时*/
 .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 19px;;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #753819;
  }
.seckill .header_time{
  float: left;
  margin: 16px 0 0 97px;
  background:#ffe9b0;
  padding:4px 6px;
  border-radius: 5px;
}
.seckill .header_time p{
  float: left;
  margin: 0;
  color:#753819;
  font-size: 12px;
}
.seckill .header_time .count_down_sty{
  float: left;
  margin: 0;
}
/*去抢购 按钮样式 */
.snap_upBtn{
  float: right;
  margin:17px 5px 0 0;
  font-size: 12px;
  padding: 4px 5px;
  background: #ffe9b0;
  color:#753819;
  border-radius: 25px;
  box-shadow:0 0 0 #ddd;
  box-shadow: 1px 1px 5px #dbac94;
}
/*限时秒杀 菜品列表 */
.seckill_goods{
  width:92%;
  height: 200px;
  background:#ffd871;
  margin:0 auto;
  margin:55px auto 15px auto;
  overflow: hidden;
}
.seckill_goods .goodsObj{

}
.seckill_goods .goodsObj img{
  width:100%;
  height:150px;
}
.seckill_goods .goodsBorder{
 margin: 0 10px;
 background: #fff;
 border-radius: 10px;
 overflow: hidden;
 padding-bottom: 10px;
 font-size: 12px;
}
.seckill_goods .goodsBorder label{
  background: #753819;
  color:#fff;
  padding:2px 3px;
  border-radius: 5px;
}
.seckill_goods .goodsBorder span{
  background: #ffd871;
  padding:2px 3px;
  border-radius: 5px;
}
/**热销top 导航条 */
.goodsNavHotWarp{
 // padding-left: 100px;
  padding-bottom: 20px;
  background-color: #f3f3f3;
  background-image: url('../assets/hot_title_icon.png');
  background-repeat:no-repeat ;
  background-position:9px 8px;
}
.goodsNavHotWarp .hot_listWrap{
  padding-top:7px;
}
/**热销商品单个的DIV */
.goodsNavHotWarp .goodsHotDiv{
  background: #f60;
  float:left;
  margin: 0 10px 10px 0;

}
</style>